---
title: Colors
description: Color scale and usage
---

Unkey uses [Radix Colors](https://www.radix-ui.com/colors) and its scale.
Darkmode is handled automatically, outside of specific edge cases we don't need to apply separate `dark:` classes.

| Step  | Use Case                                |
|-------|-----------------------------------------|
| 1     | App background                          |
| 2     | Subtle background                       |
| 3     | UI element background                   |
| 4     | Hovered UI element background           |
| 5     | Active / Selected UI element background |
| 6     | Subtle borders and separators           |
| 7     | UI element border and focus rings       |
| 8     | Hovered UI element border               |
| 9     | Solid backgrounds                       |
| 10    | Hovered solid backgrounds               |
| 11    | Low-contrast text                       |
| 12    | High-contrast text                      |

[Read more](https://www.radix-ui.com/colors/docs/palette-composition/understanding-the-scale)

## gray
<div className="grid grid-cols-12 gap-2">
  <div className="rounded-lg aspect-square bg-gray-1"/>
  <div className="rounded-lg aspect-square bg-gray-2"/>
  <div className="rounded-lg aspect-square bg-gray-3"/>
  <div className="rounded-lg aspect-square bg-gray-4"/>
  <div className="rounded-lg aspect-square bg-gray-5"/>
  <div className="rounded-lg aspect-square bg-gray-6"/>
  <div className="rounded-lg aspect-square bg-gray-7"/>
  <div className="rounded-lg aspect-square bg-gray-8"/>
  <div className="rounded-lg aspect-square bg-gray-9"/>
  <div className="rounded-lg aspect-square bg-gray-10"/>
  <div className="rounded-lg aspect-square bg-gray-11"/>
  <div className="rounded-lg aspect-square bg-gray-12"/>
</div>

## success
<div className="grid grid-cols-12 gap-2">
  <div className="rounded-lg aspect-square bg-success-1"/>
  <div className="rounded-lg aspect-square bg-success-2"/>
  <div className="rounded-lg aspect-square bg-success-3"/>
  <div className="rounded-lg aspect-square bg-success-4"/>
  <div className="rounded-lg aspect-square bg-success-5"/>
  <div className="rounded-lg aspect-square bg-success-6"/>
  <div className="rounded-lg aspect-square bg-success-7"/>
  <div className="rounded-lg aspect-square bg-success-8"/>
  <div className="rounded-lg aspect-square bg-success-9"/>
  <div className="rounded-lg aspect-square bg-success-10"/>
  <div className="rounded-lg aspect-square bg-success-11"/>
  <div className="rounded-lg aspect-square bg-success-12"/>
</div>

## info
<div className="grid grid-cols-12 gap-2">
  <div className="rounded-lg aspect-square bg-info-1"/>
  <div className="rounded-lg aspect-square bg-info-2"/>
  <div className="rounded-lg aspect-square bg-info-3"/>
  <div className="rounded-lg aspect-square bg-info-4"/>
  <div className="rounded-lg aspect-square bg-info-5"/>
  <div className="rounded-lg aspect-square bg-info-6"/>
  <div className="rounded-lg aspect-square bg-info-7"/>
  <div className="rounded-lg aspect-square bg-info-8"/>
  <div className="rounded-lg aspect-square bg-info-9"/>
  <div className="rounded-lg aspect-square bg-info-10"/>
  <div className="rounded-lg aspect-square bg-info-11"/>
  <div className="rounded-lg aspect-square bg-info-12"/>
</div>

## warning
<div className="grid grid-cols-12 gap-2">
  <div className="rounded-lg aspect-square bg-warning-1"/>
  <div className="rounded-lg aspect-square bg-warning-2"/>
  <div className="rounded-lg aspect-square bg-warning-3"/>
  <div className="rounded-lg aspect-square bg-warning-4"/>
  <div className="rounded-lg aspect-square bg-warning-5"/>
  <div className="rounded-lg aspect-square bg-warning-6"/>
  <div className="rounded-lg aspect-square bg-warning-7"/>
  <div className="rounded-lg aspect-square bg-warning-8"/>
  <div className="rounded-lg aspect-square bg-warning-9"/>
  <div className="rounded-lg aspect-square bg-warning-10"/>
  <div className="rounded-lg aspect-square bg-warning-11"/>
  <div className="rounded-lg aspect-square bg-warning-12"/>
</div>

## error
<div className="grid grid-cols-12 gap-2">
  <div className="rounded-lg aspect-square bg-error-1"/>
  <div className="rounded-lg aspect-square bg-error-2"/>
  <div className="rounded-lg aspect-square bg-error-3"/>
  <div className="rounded-lg aspect-square bg-error-4"/>
  <div className="rounded-lg aspect-square bg-error-5"/>
  <div className="rounded-lg aspect-square bg-error-6"/>
  <div className="rounded-lg aspect-square bg-error-7"/>
  <div className="rounded-lg aspect-square bg-error-8"/>
  <div className="rounded-lg aspect-square bg-error-9"/>
  <div className="rounded-lg aspect-square bg-error-10"/>
  <div className="rounded-lg aspect-square bg-error-11"/>
  <div className="rounded-lg aspect-square bg-error-12"/>
</div>

## feature
<div className="grid grid-cols-12 gap-2">
  <div className="rounded-lg aspect-square bg-feature-1"/>
  <div className="rounded-lg aspect-square bg-feature-2"/>
  <div className="rounded-lg aspect-square bg-feature-3"/>
  <div className="rounded-lg aspect-square bg-feature-4"/>
  <div className="rounded-lg aspect-square bg-feature-5"/>
  <div className="rounded-lg aspect-square bg-feature-6"/>
  <div className="rounded-lg aspect-square bg-feature-7"/>
  <div className="rounded-lg aspect-square bg-feature-8"/>
  <div className="rounded-lg aspect-square bg-feature-9"/>
  <div className="rounded-lg aspect-square bg-feature-10"/>
  <div className="rounded-lg aspect-square bg-feature-11"/>
  <div className="rounded-lg aspect-square bg-feature-12"/>
</div>

## orange
<div className="grid grid-cols-12 gap-2">
  <div className="rounded-lg aspect-square bg-orange-1"/>
  <div className="rounded-lg aspect-square bg-orange-2"/>
  <div className="rounded-lg aspect-square bg-orange-3"/>
  <div className="rounded-lg aspect-square bg-orange-4"/>
  <div className="rounded-lg aspect-square bg-orange-5"/>
  <div className="rounded-lg aspect-square bg-orange-6"/>
  <div className="rounded-lg aspect-square bg-orange-7"/>
  <div className="rounded-lg aspect-square bg-orange-8"/>
  <div className="rounded-lg aspect-square bg-orange-9"/>
  <div className="rounded-lg aspect-square bg-orange-10"/>
  <div className="rounded-lg aspect-square bg-orange-11"/>
  <div className="rounded-lg aspect-square bg-orange-12"/>
</div>

## accent
<div className="grid grid-cols-12 gap-2">
  <div className="rounded-lg aspect-square bg-accent-1"/>
  <div className="rounded-lg aspect-square bg-accent-2"/>
  <div className="rounded-lg aspect-square bg-accent-3"/>
  <div className="rounded-lg aspect-square bg-accent-4"/>
  <div className="rounded-lg aspect-square bg-accent-5"/>
  <div className="rounded-lg aspect-square bg-accent-6"/>
  <div className="rounded-lg aspect-square bg-accent-7"/>
  <div className="rounded-lg aspect-square bg-accent-8"/>
  <div className="rounded-lg aspect-square bg-accent-9"/>
  <div className="rounded-lg aspect-square bg-accent-10"/>
  <div className="rounded-lg aspect-square bg-accent-11"/>
  <div className="rounded-lg aspect-square bg-accent-12"/>
</div>

## Alpha Colors

### grayA
<div className="grid grid-cols-12 gap-2">
  <div className="rounded-lg aspect-square bg-grayA-1"/>
  <div className="rounded-lg aspect-square bg-grayA-2"/>
  <div className="rounded-lg aspect-square bg-grayA-3"/>
  <div className="rounded-lg aspect-square bg-grayA-4"/>
  <div className="rounded-lg aspect-square bg-grayA-5"/>
  <div className="rounded-lg aspect-square bg-grayA-6"/>
  <div className="rounded-lg aspect-square bg-grayA-7"/>
  <div className="rounded-lg aspect-square bg-grayA-8"/>
  <div className="rounded-lg aspect-square bg-grayA-9"/>
  <div className="rounded-lg aspect-square bg-grayA-10"/>
  <div className="rounded-lg aspect-square bg-grayA-11"/>
  <div className="rounded-lg aspect-square bg-grayA-12"/>
</div>

### successA
<div className="grid grid-cols-12 gap-2">
  <div className="rounded-lg aspect-square bg-successA-1"/>
  <div className="rounded-lg aspect-square bg-successA-2"/>
  <div className="rounded-lg aspect-square bg-successA-3"/>
  <div className="rounded-lg aspect-square bg-successA-4"/>
  <div className="rounded-lg aspect-square bg-successA-5"/>
  <div className="rounded-lg aspect-square bg-successA-6"/>
  <div className="rounded-lg aspect-square bg-successA-7"/>
  <div className="rounded-lg aspect-square bg-successA-8"/>
  <div className="rounded-lg aspect-square bg-successA-9"/>
  <div className="rounded-lg aspect-square bg-successA-10"/>
  <div className="rounded-lg aspect-square bg-successA-11"/>
  <div className="rounded-lg aspect-square bg-successA-12"/>
</div>

### warningA
<div className="grid grid-cols-12 gap-2">
  <div className="rounded-lg aspect-square bg-warningA-1"/>
  <div className="rounded-lg aspect-square bg-warningA-2"/>
  <div className="rounded-lg aspect-square bg-warningA-3"/>
  <div className="rounded-lg aspect-square bg-warningA-4"/>
  <div className="rounded-lg aspect-square bg-warningA-5"/>
  <div className="rounded-lg aspect-square bg-warningA-6"/>
  <div className="rounded-lg aspect-square bg-warningA-7"/>
  <div className="rounded-lg aspect-square bg-warningA-8"/>
  <div className="rounded-lg aspect-square bg-warningA-9"/>
  <div className="rounded-lg aspect-square bg-warningA-10"/>
  <div className="rounded-lg aspect-square bg-warningA-11"/>
  <div className="rounded-lg aspect-square bg-warningA-12"/>
</div>

### errorA
<div className="grid grid-cols-12 gap-2">
  <div className="rounded-lg aspect-square bg-errorA-1"/>
  <div className="rounded-lg aspect-square bg-errorA-2"/>
  <div className="rounded-lg aspect-square bg-errorA-3"/>
  <div className="rounded-lg aspect-square bg-errorA-4"/>
  <div className="rounded-lg aspect-square bg-errorA-5"/>
  <div className="rounded-lg aspect-square bg-errorA-6"/>
  <div className="rounded-lg aspect-square bg-errorA-7"/>
  <div className="rounded-lg aspect-square bg-errorA-8"/>
  <div className="rounded-lg aspect-square bg-errorA-9"/>
  <div className="rounded-lg aspect-square bg-errorA-10"/>
  <div className="rounded-lg aspect-square bg-errorA-11"/>
  <div className="rounded-lg aspect-square bg-errorA-12"/>
</div>


